<html>  
<head>  
	<meta charset="utf-8">  
	<title>完整的柱形图</title>
	  
</head> 


<body>  
	<style>
		line{
			stroke:yellow ;
			stroke-width:5
		}
		
		rect{
			fill:steelblue;
			stroke:red ;
			stroke-width:4;
			opacity:0.4
		}
		
		path{
			stroke:gray;
			stroke-width:3;
		}
		#rrr{
			fill:gray; 
			stroke:green
		}
		
		text{
			font-size:2
		}
	
	</style>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
	<script>
	


		var width  = 400;
		var height = 400;
			
		var svg = d3.select("body").append("svg")
			    .attr("width", width)
			    .attr("height", height);
				
		var defs = svg.append("defs");
	
		var arrowMarker = defs.append("marker")
								.attr("id","arrow")
								.attr("markerUnits","strokeWidth")
							    .attr("markerWidth","12")
		                        .attr("markerHeight","12")
		                        .attr("viewBox","0 0 12 12") 
		                        .attr("refX","6")
		                        .attr("refY","6")
		                        .attr("orient","auto");
	
		var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
								
		arrowMarker.append("path")
					.attr("d",arrow_path)
					.attr("fill","#000");
	
		var line = svg.append("line")
					 .attr("x1",0)
					 .attr("y1",0)
					 .attr("x2",200)
					 .attr("y2",50)
					 .attr("stroke","red")
					 .attr("stroke-width",2)
					 .attr("marker-end","url(#arrow)");
	
		var curve_path = "M20,70 T80,100 T160,80 T200,90";
	
		var curve = svg.append("path")
					 .attr("d",curve_path)
					 .attr("fill","white")
					 .attr("stroke","red")
					 .attr("stroke-width",2)
					 .attr("marker-start","url(#arrow)")
					 .attr("marker-mid","url(#arrow)")
					 .attr("marker-end","url(#arrow)");
					 
	</script>
	<svg width='800' height='1200'>
		<rect x="20" y="20" width="200" height="100" />
		<rect id="rrr" x="420" y="20" rx="20" ry="40" width="200" height="100"  />
		
		<circle cx="120" cy="220" r="80" style="fill:green;stroke:black;stroke-width:4"></circle>
		<ellipse cx="520" cy="220" r="80" rx="110" ry="40" style="fill:green;stroke:black;stroke-width:4"></ellipse>
		
		<line x1="120" y1="320" x2="450" y2="345" />
		<line x1="720" y1="320" x2="450" y2="345" style="stroke:gray ;stroke-width:5"/>
		
		<polygon points="100,400 200,600 150,700 130,500 80,450" style="fill:LawnGreen;"></polygon>
		<polygon points="100,400 200,600 150,700 130,500 80,450" style="fill:white; stroke:green ;stroke-width:5 " transform="translate(80,0)"></polygon>
		<polygon points="100,400 200,600 150,700 130,500 80,450" style="fill:white; stroke:green ;stroke-width:5 " transform="translate(120,0)"></polygon>
		<polygon points="100,400 200,600 150,700 130,500 80,450" style="fill:white; stroke:green ;stroke-width:5 " transform="translate(150,0)"></polygon>
		
		<path d="M30,800 L270,800 M30,810 H230 M30,800 V850"  />
		
		<path d="M40,900 C100,1350 120,1000 130,900" transform="translate(380,-150)" style="fill:white"/>
		<path d="M40,900 C100,1350 120,1000 230,900" transform="translate(380,-450)" style="fill:white"/>
		
		<text x="200" y="1000" dx="-5" dy="5" rotate="120" textLength="90">
		I love <tspan fill="red">3D</tspan>
		</text>
		
	</svg>
	  
</body>  
</html>  